import React from "react";
// withRouter是一个高阶组件，作用是让那些没有路由信息的组件直接拥有路由信息
import {
  Link,
  Route,
  Switch,
  // withRouter,
  useHistory,
  useLocation,
  useParams,
  useRouteMatch,
} from "react-router-dom";

class Home extends React.Component {
  render() {
    return (
      <>
        <div>home页面</div>
      </>
    );
  }
}

// const About = (props) => {
//   console.log(props);
//   return <div>about页面</div>;
// };
class About extends React.Component {
  render() {
    console.log(this.props);
    return (
      <>
        <div>about页面</div>
      </>
    );
  }
}
// const About2 = () => {
//   return <About />;
// };

// class Mine extends React.Component {
//   render() {
//     return <div>mine页面</div>;
//   }
// }
const Mine = () => {
  return <div>mine页面</div>;
};

// class Cart extends React.Component {
//   render() {
//     console.log(this.props);
//     return <div>购物车页面</div>;
//   }
// }
// const Cart2 = withRouter(Cart);

const Cart = () => {
  const location = useLocation();
  console.log(location);
  const histroy = useHistory();
  console.log(histroy);
  const match = useRouteMatch();
  console.log(match);
  const params = useParams();
  console.log(params);

  return <div>购物车页面</div>;
};

const App = () => {
  return (
    <>
      <h2>react-router-v5-路由组件渲染方式</h2>
      <ul>
        <li>
          <Link to="/home">首页</Link>
        </li>
        <li>
          <Link to="/about">关于页</Link>
        </li>
        <li>
          <Link to="/mine">我的页</Link>
        </li>
        <li>
          <Link to="/cart">购物车</Link>
        </li>
      </ul>

      <hr />

      <Switch>
        {/* 很多情况下，我们是使用component属性来渲染路由组件的 */}
        <Route path="/home" component={Home}></Route>

        {/* 我们也可以使用render属性来渲染组件 */}
        {/* 但是render方法不能去渲染类组件的 */}
        <Route
          path="/about"
          render={(props) => {
            // console.log(props);
            return <About {...props} />;
            // render里面可以写函数
            // 就说明可以写逻辑判断了, 可以做路由鉴权了
            // if (3 > 2) {
            //   return <About />;
            // } else {
            //   return <Abc />;
            // }
          }}
        ></Route>

        {/* 当没有Switch组件的时候，children的效果是不管是否匹配都会直接渲染 */}
        {/* 当有Switch的情况下，children属性效果和render属性完全一样 */}
        <Route path="/mine" children={Mine}></Route>

        {/* 通过Route插槽的方式去渲染组件 */}
        {/* 既可以渲染类组件，也可以渲染函数组件，但是渲染的组件默认是没有路由信息的 */}
        {/* 如果想要有路由信息，可以通过withRouter或者4个hooks来帮助获取 */}
        <Route path="/cart">
          <Cart />
        </Route>
      </Switch>
    </>
  );
};

export default App;
